<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-06 00:34:26
 * @LastEditTime: 2020-03-20 01:09:03
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <style type="text/css">
        .head {
            background-color: #fff;
        }

        .van-nav-bar .van-icon {
            color: #323233;
        }

        .van-nav-bar__title {
            color: #323233;
        }

        .content {
            background: #fff !important;
        }

        .h {
            border-bottom: 1px solid #ededee;
            overflow: hidden;
            padding: 8px 10px;
        }

        .h .l {
            float: left;
        }

        .h .l img {
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }

        .h .r {
            float: right;
            line-height: 40px;
            color: #818586;
            font-size: 13px;
        }


        .dk {
            padding: 20px 10px;
            min-height: 200px;
        }

        .dk .d {
            color: #818586;
        }

        .dk .c {
            margin: 10px 0;
        }

        .dk .c>div {
            width: 120px;
            height: 120px;
            border-radius: 70px;
            margin: 0 auto;
            color: #fff;
            padding: 40px 0;
            text-align: center;
            line-height: 24px;
        }

        .zc {
            background-image: linear-gradient(#64bfff, #3097fb);
        }

        .wq {
            background-image: linear-gradient(#32e9af, #16be84);
        }

        .yc {
            background-image: linear-gradient(#f7c143, #dca31d);
        }



        .dk .c .n {
            color: rgba(255, 255, 255, 0.6);
        }

        .dk .a {
            color: #767677;
            font-size: 13px;
            text-align: center;
        }

        .clockType-1 {
            color: #25bd0c;
            font-size: 12px;
            border-radius: 4px;
            border: 1px solid #25bd0c;
            display: inline-block;
            padding: 0px 4px;
            margin-left: 6px;
        }

        .clockType-2 {
            color: #dca31d;
            font-size: 12px;
            border-radius: 4px;
            border: 1px solid #dca31d;
            display: inline-block;
            padding: 0px 4px;
            margin-left: 6px;
        }

        .clockType-3 {
            color: #3296fa;
            font-size: 12px;
            border-radius: 4px;
            border: 1px solid #3296fa;
            display: inline-block;
            padding: 0px 4px;
            margin-left: 6px;
        }

        .sq {
            color: #20197d;
            padding: 18px 14px;
            font-size: 13px;
        }

        .sq>* {
            vertical-align: middle;
        }

        .bold {
            font-weight: 700;
            font-size: 16px;
        }

        .address {
            color: #9a9a9a;
            font-size: 13px;
            margin-top: 10px;
        }

        .address>* {
            vertical-align: middle;
        }

        .q {
            margin-top: 10px;
        }

        .q span {
            width: 60px;
            text-align: center;
        }

        .zt {
            text-align: center;
            padding: 15px 0;
            font-weight: 700;
            font-size: 17px;
            border-bottom: 1px solid #ebedf0;
        }

        .d {
            font-size: 17px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebedf0;
        }

        .d>div {
            padding: 5px 10px;
        }

        .t {
            color: #9e9e9e;
        }

        .r {}

        .p {
            padding: 10px;
        }

        .van-uploader__preview-delete {
            position: absolute;
            top: -8px;
            right: -8px;
            color: #969799;
            font-size: 18px;
            background-color: #fff;
            border-radius: 100%;
        }

        .van-uploader__upload {
            width: 60px;
            height: 60px;
        }

        .van-uploader__preview-image {
            width: 60px;
            height: 60px;
        }

        .van-uploader__preview-delete {
            height: 20px;
        }

        .im {
            padding: 20px 10px 0 10px;
        }

        .im img {
            width: 100%;
        }

        .da {
            font-size: 40px;
            text-align: center;
            padding-bottom: 20px;
        }

        .dt {
            font-size: 16px;
            text-align: center;
            padding-bottom: 40px;
        }

        .c-1 {
            color: #ff943e;
        }

        .c-2 {
            color: #16be84;
        }

        .c-3 {
            color: #3296fa;
        }

        .v-m span {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="考勤打卡" left-arrow @click-left="onClickLeft">
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <div class="h">
                        <div class="l">
                            <img :src="userInfo.S_HeadImg?userInfo.S_HeadImg:'../../image/header.png'" />
                            <span>{{userInfo.UserName}}</span>
                        </div>
                        <div class="r" @click="selectDateEvent">
                            <span>{{selectDate}}</span>
                            <van-icon name="arrow-down"></van-icon>
                        </div>
                    </div>
                    <div class="dk">
                        <div class="d">上班时间{{baseData && baseData.BSDate}}</div>
                        <div
                            v-if="(lockStatusArray[0] == 0 && hour < 12 && selectDate == todayDate) || selectDate > todayDate">
                            <div class="c" v-if="S_IsOut == 1">
                                <div class="wq" @click="punchClock(1)">
                                    <div>外勤打卡</div>
                                    <div class="n">{{nowDate}}</div>
                                </div>
                            </div>
                            <div class="c" v-if="S_IsOut == 0">
                                <div :class="selectDate > todayDate?'zc':(getClockText(1)=='正常打卡'?'zc':'yc')"
                                    @click="punchClock(1)">
                                    <div>{{getClockText(1)}}</div>
                                    <div class="n">{{nowDate}}</div>
                                </div>
                            </div>
                            <div class="a" v-if="S_IsOut == 0">已进入考勤范围&nbsp;
                                <!-- <span style="color: #cd1b21" @click="newLocation(1)">重新定位</span> -->
                            </div>
                        </div>
                        <div class="q"
                            v-if="(lockStatusArray[0] == 0 && selectDate < todayDate) || (lockStatusArray[0] == 0 && selectDate == todayDate && hour >= 12)">
                            <div><span class="clockType-2">缺卡</span></div>
                            <div class="sq" @click="ApplyBK(1)"><span>申请补卡</span>
                                <van-icon name="arrow"></van-icon>
                            </div>
                        </div>
                        <div style="margin-top:10px;" v-if="lockStatusArray[0] == 1 && clockRecord.length">
                            <div class="v-m">
                                <span class="bold">打卡时间{{clockRecord[0].BDate}}</span>
                                <span v-if="getStatusText1(clockRecord[0])"
                                    :class="getColorText1(clockRecord[0])">{{getStatusText1(clockRecord[0])}}</span>
                                <span v-if="getStatusText2(clockRecord[0])"
                                    :class="getColorText2(clockRecord[0])">{{getStatusText2(clockRecord[0])}}</span>
                            </div>
                            <div class="address">
                                <van-icon name="location" size="18px"></van-icon>
                                <span>{{clockRecord[0].TName}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="dk">
                        <div class="d">下班时间{{baseData && baseData.BEDate}}</div>
                        <div
                            v-if="((lockStatusArray[0] == 1 && lockStatusArray[1] == 0) || ((lockStatusArray[0] == 0 && lockStatusArray[1] == 0) && hour >= 12)) && selectDate == todayDate">
                            <div class="c" v-if="S_IsOut == 1">
                                <div class="wq" @click="punchClock(-1)">
                                    <div>外勤打卡</div>
                                    <div class="n">{{nowDate}}</div>
                                </div>
                            </div>
                            <div class="c" v-if="S_IsOut == 0">
                                <div class="zc" @click="punchClock(-1)">
                                    <div>下班打卡</div>
                                    <div class="n">{{nowDate}}</div>
                                </div>
                            </div>
                            <div class="a" v-if="S_IsOut == 0">已进入考勤范围&nbsp;
                                <!-- <span style="color: #cd1b21" @click="newLocation(-1)">重新定位</span> -->
                            </div>
                        </div>
                        <div class="q" v-if="lockStatusArray[1] == 0 && selectDate < todayDate">
                            <div><span class="clockType-2">缺卡</span></div>
                            <div class="sq" @click="ApplyBK(-1)"><span>申请补卡</span>
                                <van-icon name="arrow"></van-icon>
                            </div>
                        </div>
                        <div style="margin-top:10px;" v-if="lockStatusArray[1] == 1 && clockRecord.length">
                            <div class="v-m">
                                <span
                                    class="bold">打卡时间{{lockStatusArray[0] == 0?clockRecord[0].BDate:clockRecord[1].BDate}}</span>
                                <span v-if="getStatusText1(lockStatusArray[0] == 0?clockRecord[0]:clockRecord[1])"
                                    :class="getColorText1(lockStatusArray[0] == 0?clockRecord[0]:clockRecord[1])">{{getStatusText1(lockStatusArray[0] == 0?clockRecord[0]:clockRecord[1])}}</span>
                                <span v-if="getStatusText2(lockStatusArray[0] == 0?clockRecord[0]:clockRecord[1])"
                                    :class="getColorText2(lockStatusArray[0] == 0?clockRecord[0]:clockRecord[1])">{{getStatusText2(lockStatusArray[0] == 0?clockRecord[0]:clockRecord[1])}}</span>
                            </div>
                            <div class="address">
                                <van-icon name="location" size="18px"></van-icon>
                                <span>{{lockStatusArray[0] == 0?clockRecord[0].TName:clockRecord[1].TName}}</span>
                            </div>
                            <div class="sq" @click="updatePunchClock" v-if="selectDate == todayDate"><span>更新打卡</span>
                                <van-icon name="arrow"></van-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>

        <van-popup v-model="showDate" round position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" @confirm="confirmDate" @cancel="cancelDate" />
        </van-popup>

        <van-popup v-model="showRemark" round :style="{ width: '80%' }">
            <div class="zt">{{punchClockType=='早退'?'确定要早退打卡吗?':'迟到打卡备注'}}</div>
            <div class="d">
                <div class="flex-box">
                    <div class="t">打卡时间：</div>
                    <div class="flex-main">{{FLD.getClockFormatDate()}}</div>
                </div>
                <div class="flex-box">
                    <div class="t">打卡地点：</div>
                    <div class="flex-main">{{S_TName}}</div>
                </div>
            </div>
            <div class="r">
                <van-field v-model="S_Remarks" rows="3" autosize type="textarea" placeholder="请填写打卡备注（选填）"
                    style="font-size: 17px;"></van-field>
                <div class="p">
                    <div>
                        <div class="van-uploader">
                            <div class="van-uploader__wrapper">
                                <div class="van-uploader__preview" v-show="S_Path">
                                    <div class="van-image van-uploader__preview-image"
                                        style="overflow: hidden; border-radius: 4px;">
                                        <img :src="'http://' + S_Path" class="van-image__img"
                                            style="object-fit: cover;" />
                                    </div>
                                    <i class="van-icon van-icon-clear van-uploader__preview-delete"
                                        @click="S_Path = ''"></i>
                                </div>
                                <div class="van-uploader__upload" v-show="!S_Path" @click="chooseImg">
                                    <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <van-row>
                    <van-col span="12">
                        <van-button type="default" block @click="showRemark = false;"><span
                                style="color: #cd1b21;">不打卡</span></van-button>
                    </van-col>
                    <van-col span="12">
                        <van-button type="default" block @click="confirmDK"><span style="color: #cd1b21;">确定</span>
                        </van-button>
                    </van-col>
                </van-row>
            </div>
        </van-popup>


        <van-popup v-model="dkSuccess.show" round :style="{ width: '80%' }">
            <div class="im"><img :src="getDKImg()" /></div>
            <div class="da" :class="S_IsOut?'c-2':((dkSuccess.type == 1 || dkSuccess.type == -1)?'c-3':'c-1')">
                {{dkSuccess.date}}</div>
            <div class="dt" :class="S_IsOut?'c-2':((dkSuccess.type == 1 || dkSuccess.type == -1)?'c-3':'c-1')">
                {{dkSuccess.type > 0?'上班打卡成功':'下班打卡成功'}}</div>
            <div>
                <van-row>
                    <van-col span="24">
                        <van-button type="default" block @click="dkSuccess.show = false">
                            <span style="color: #cd1b21;">我知道了</span></van-button>
                    </van-col>
                </van-row>
            </div>
        </van-popup>

    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        // $('.init-full').show();
        var userInfo = FLD.getUserInfo();

        var map = api.require('bMap');
        if (api.systemType == 'android') {
			map.setAgreePrivacy({
			agree:true
		});	
		}
        // if (api.systemType == 'ios') {
            map.initMapSDK(function (ret) { });
        // }

        api.addEventListener({
            name: 'refreshClock'
        }, function (ret, err) {
            vm.getclockRecord();
        });

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                userInfo: userInfo,
                todayDate: FLD.getFormatDate().split(' ')[0],
                selectDate: FLD.getFormatDate().split(' ')[0],
                currentDate: new Date(),
                nowDate: FLD.getFormatDate().split(' ')[1],
                hour: new Date().getHours(),
                showDate: false,
                baseData: '',
                clockRecord: [],
                lockStatusArray: [1, 1],      //0未打卡  1已打卡
                S_Path: '',
                S_Remarks: '',
                S_Longitude: '',
                S_Latitude: '',
                S_IsOut: 0,
                S_TName: '',
                showRemark: false,
                punchClockType:'',
                dkSuccess: {
                    show: false,
                    date: '',
                    type: ''
                }
            },
            created: function () {
                var that = this;
                that.getbaseData();
                setInterval(function () {
                    that.nowDate = FLD.getFormatDate().split(' ')[1];
                    that.hour = new Date().getHours();
                }, 1000)
            },
            methods: {
                getColorText1(data) {
                    if (data.Status == 2) {
                        return 'clockType-2'
                    } else if (data.Status == -2) {
                        return 'clockType-2'
                    } else {
                        return ''
                    }
                },
                getColorText2(data) {
                    if (data.IsOut == 99) {
                        return 'clockType-2'
                    } else if (data.IsOut == 1) {
                        return 'clockType-1'
                    } else {
                        return ''
                    }
                },
                getStatusText1(data) {
                    if (data.Status == 2) {
                        return '迟到'
                    } else if (data.Status == -2) {
                        return '早退'
                    } else {
                        return ''
                    }
                },
                getStatusText2(data) {
                    if (data.IsOut == 99) {
                        return '补卡'
                    } else if (data.IsOut == 1) {
                        return '外勤'
                    } else {
                        return ''
                    }
                },
                getDKImg() {
                    var that = this;
                    if (that.S_IsOut) {
                        return ' ../../image/oa/xb3.png';
                    } else {
                        if (that.dkSuccess.type == 1 || that.dkSuccess.type == -1) {
                            return ' ../../image/oa/xb2.png';
                        } else {
                            return ' ../../image/oa/xb1.png';
                        }
                    }

                },
                chooseImg() {
                    var that = this;

                    var FNPhotograph = api.require('FNPhotograph');
                    FNPhotograph.open({
                        path: 'fs://',
                        album: true,
                        quality: 'medium'
                    }, function (ret) {
                        if (ret.eventType == 'takePhoto') {
                            FNPhotograph.close();
                            FLD.uploadFile('早退打卡', ret.imagePath, function (path) {
                                that.S_Path = FLD.serverIP + path;
                            })
                        }
                    });
                },
                ApplyBK(index) {
                    var that = this;
                    var BillDate = '';
                    if (index == 1) {
                        BillDate = that.selectDate + ' ' + that.baseData.BSDate;
                    } else {
                        BillDate = that.selectDate + ' ' + that.baseData.BEDate;
                    }
                    api.openWin({
                        name: 'formConfig',
                        url: '../common/formConfig.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            objName: 'app_补卡申请',
                            titleName: '补卡申请',
                            defaultValue: {
                                BillDate: BillDate,
                                BStatus: index == 1 ? '上班打卡' : '下班打卡'
                            }

                        }
                    })
                },
                getClockText(index) {
                    var that = this;
                    if (that.baseData) {
                        if (index == 1) {
                            if (that.selectDate > that.todayDate) {
                                return '上班打卡';
                            } else {
                                if (FLD.getClockFormatDate() > that.baseData.BSDate) {
                                    return '迟到打卡';
                                } else {
                                    return '上班打卡';
                                }
                            }


                        } else {
                            if (FLD.getClockFormatDate() > that.baseData.BEDate) {
                                return '下班打卡';
                            } else {
                                return '早退打卡';
                            }

                        }
                    }

                },
                selectDateEvent() {
                    var that = this;
                    that.currentDate = new Date(that.selectDate);
                    that.showDate = true;
                },
                getbaseData() {
                    var that = this;
                    FLD.ajax('APP_HQGRKQXX_K', {}, function (res) {
                        that.baseData = res.ds[0];
                        that.getNewLocation();
                        that.getclockRecord();
                    })
                },
                getclockRecord() {
                    var that = this;
                    that.showLoading = true;

                    var obj = {
                        S_UserID: FLD.getUserInfo().UserID,
                        S_SDate: that.selectDate,
                        S_EDate: that.selectDate,
                        S_NBranchID: that.baseData.BID
                    }
                    FLD.ajax('APP_SXBDKJL_N', obj, function (res) {
                        that.showLoading = false;
                        var clockRecord = [];
                        var x = -1;
                        var y = -1;
                        for (var i in res.ds) {
                            if (res.ds[i].Status == 1 || res.ds[i].Status == 2) {
                                x = i;
                            }
                            if (res.ds[i].Status == -1 || res.ds[i].Status == -2) {
                                y = i;
                            }
                        }

                        if (x > -1) {
                            clockRecord.push(res.ds[x]);
                        }
                        if (y > -1) {
                            clockRecord.push(res.ds[y]);
                        }

                        that.clockRecord = clockRecord;


                        if (x == -1 && y == -1) {
                            that.lockStatusArray = [0, 0];
                        } else if (x > -1 && y == -1) {
                            that.lockStatusArray = [1, 0];
                        } else if (x == -1 && y > -1) {
                            that.lockStatusArray = [0, 1];
                        } else if (x > -1 && y > -1) {
                            that.lockStatusArray = [1, 1];
                        }


                    })

                },
                getNewLocation() {
                    var that = this;
                    map.getLocation({
                        accuracy: '10m',
                        autoStop: false
                    }, function (ret, err) {
                        if (!that.baseData.Longitude || !that.baseData.Latitude) {
                            that.S_IsOut = 0;
                        } else {
                            var rangeJSON = that.calLatLngByDistance(ret.lat, ret.lon, 500);
                            if (that.baseData.Longitude > rangeJSON.newLng1 && that.baseData.Longitude < rangeJSON.newLng2 && that.baseData.Latitude > rangeJSON.newLat1 && that.baseData.Latitude < rangeJSON.newLat2) {
                                that.S_IsOut = 0;
                            } else {
                                that.S_IsOut = 1;
                            }
                        }

                    })
                },
                newLocation(index) {
                    api.openWin({
                        name: '考勤定位',
                        url: 'userClock.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            punchClockType: index
                        }
                    })
                },
                confirmDK() {
                    var that = this;
                    that.showRemark = false;
                    if(that.punchClockType == '早退'){
                        that.punchClock(-1, true);
                    }else{
                        that.punchClock(1, true);
                    }
                    

                },
                updatePunchClock() {
                    var that = this;
                    that.$dialog.confirm({
                        title: '提示',
                        message: '确定要更新此次打卡记录吗?'
                    }).then(() => {
                        that.punchClock(-1);


                    }).catch(() => {

                    });
                },
                punchClock(index, status) {
                    var that = this;
                    if (that.showLoading == true) {
                        return false;
                    }
                    if (FLD.getFormatDate().split(' ')[0] < that.selectDate) {
                        layer.open({
                            content: '未到最早上班时间!',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }

                    that.showLoading = true;
                    map.getLocation({
                        accuracy: '10m',
                        autoStop: true
                    }, function (ret, err) {
                        that.S_Longitude = ret.lon;
                        that.S_Latitude = ret.lat;
                        var rangeJSON = that.calLatLngByDistance(ret.lat, ret.lon, 500);
                        if (ret.lon > rangeJSON.newLng1 && ret.lon < rangeJSON.newLng2 && ret.lat > rangeJSON.newLat1 && ret.lat < rangeJSON.newLat2) {
                            that.S_IsOut = 0;
                        } else {
                            that.S_IsOut = 1;
                        }
                        map.getNameFromCoords({
                            lon: ret.lon,
                            lat: ret.lat
                        }, function (ret, err) {
                            that.S_TName = ret.address;

                            if (index == 1) {
                                if (that.getClockText(1) == '迟到打卡') {
                                    index = 2;
                                }
                            } else if (index == -1) {
                                if (that.getClockText(2) == '早退打卡') {
                                    index = -2;
                                }
                            }
                            if (index == -2 && !status) {
                                that.punchClockType = '早退';
                                that.showRemark = true;
                                that.showLoading = false;
                                return;
                            }else if(index == 2 && !status){
                                that.punchClockType = '迟到';
                                that.showRemark = true;
                                that.showLoading = false;
                                return;
                            }
                            var obj = {
                                S_NBranchID: that.baseData.BID,
                                S_Status: index,
                                S_Path: that.S_Path,
                                S_Remarks: that.S_Remarks,
                                S_Longitude: that.S_Longitude,
                                S_Latitude: that.S_Latitude,
                                S_IsOut: that.S_IsOut,
                                S_TName: that.S_TName
                            }
                            FLD.ajax('APP_SXBDKJK_N', obj, function (res) {
                                that.showLoading = false;
                                that.punchClockType = '';
                                that.getclockRecord();

                                that.dkSuccess.show = true;
                                that.dkSuccess.date = FLD.getClockFormatDate();
                                that.dkSuccess.type = index;

                                api.sendEvent({
                                    name: 'refreshClock'
                                });

                            })
                        });
                    })

                },
                confirmDate(value) {
                    this.selectDate = FLD.getFormatDate(value).split(' ')[0]
                    this.showDate = false;
                    this.getclockRecord();
                },
                cancelDate(value) {
                    this.showDate = false;
                },
                calLatLngByDistance(originLat, originLng, distance) {
                    //计算距离
                    var getDistance = ($lng1, $lat1, $lng2, $lat2) => {
                        const $earthRadius = 6367000;
                        $lat1 = ($lat1 * Math.PI) / 180;
                        $lng1 = ($lng1 * Math.PI) / 180;
                        $lat2 = ($lat2 * Math.PI) / 180;
                        $lng2 = ($lng2 * Math.PI) / 180;
                        const $calcLongitude = $lng2 - $lng1;
                        const $calcLatitude = $lat2 - $lat1;
                        const $stepOne = Math.pow(Math.sin($calcLatitude / 2), 2) + Math.cos($lat1) * Math.cos($lat2) * Math.pow(Math.sin($calcLongitude / 2), 2);
                        const $stepTwo = 2 * Math.asin(Math.min(1, Math.sqrt($stepOne)));
                        const $calculatedDistance = ($earthRadius * $stepTwo);
                        return Math.round($calculatedDistance);
                    }
                    let newLat1, newLat2, newLng1, newLng2

                    let latDistance = getDistance(originLng, 1, originLng, 2);
                    newLat1 = (originLat - (distance / latDistance)).toFixed(8);
                    newLat2 = (originLat + (distance / latDistance)).toFixed(8);
                    let lngDistance = getDistance(1, originLat, 2, originLat);
                    newLng1 = (originLng - (distance / lngDistance)).toFixed(8);
                    newLng2 = (originLng + (distance / lngDistance)).toFixed(8);

                    return {
                        newLat1: newLat1,
                        newLat2: newLat2,
                        newLng1: newLng1,
                        newLng2: newLng2
                    }

                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>